<html>
	<head>
		<meta http-equiv="Content-Language" content="en-us">
	</head>
	<body>
        <style>
			u,em {
				display:inline;
				margin-left:3px;
				margin-right:3px;
				height:17px;
				overflow:hidden;
				background-repeat:no-repeat;
				padding-left:13px;
				text-decoration:none;
			   }
			em {
			   padding-left:20px;
			   height:20px;
			   }   
	    </style>
		<p align="center"><b><font size="5">Using EJS TreeGrid</font></b></p>
		<p><font color="#008000"><i><b><a name="Mouse">Mouse functions</a></b></i></font></p>
		<ul>
			<li><b>Click to cell</b> focuses and let edit (editable) cell</li>
			<li><b>Click to</b><u style='background:url(Modern/Panel.gif) -101px 0px;'></u>selects or un-selects row</li>
			<li><b>Dragging</b><u style='background:url(Modern/Panel.gif) -101px 0px;'></u>inverts selection in continuous range of rows</li>
			<li><b>Click to</b><u style='background:url(Modern/Panel.gif) -251px 0px;'></u>deletes or un-deletes row</li>
			<li><b>Click to</b><u style='background:url(Modern/Panel.gif) -351px 0px;'></u>adds new row or or duplicates the row or copies selected rows above or below the row</li>
         <li><b>Dragging</b><u style='background:url(Modern/Panel.gif) -3px 0px;'></u>moves row to new position</li>
			<li><b>Click to<u style='background:url(Modern/Panel.gif) -101px 0px;'></u>in header</b> selects or unselects all rows</li>
         <li><b>Ctrl + Click to<u style='background:url(Modern/Panel.gif) -101px 0px;'></u>in header</b> inverts selection of all rows</li>
			<li><b>Click to<u style='background:url(Modern/Panel.gif) -251px 0px;'></u>in header</b> deletes or un-deletes selected rows</li>
			<li><b>Click to<u style='background:url(Modern/Panel.gif) -351px 0px;'></u>in header</b> adds new row or duplicates focused row or copies selected rows above or below focused row</li>
         <li><b>Click to<u style='padding-left:16px; background:url(Modern/ButtonSpace.gif) -1px -1002px;'></u>in filter / group / search row panel</b> enables / disables actual filter / group / search settings</li>
         <li><b>Click to<u style='background:url(Modern/ButtonSpace.gif) -1px -1750px;'></u>in filter cell</b> enables boolean filter by value 1, 
            next click to<u style='background:url(Modern/Button.gif) -1px -1000px;'></u> filters by value 0 
            and next click to<u style='background:url(Modern/Button.gif) -1px -750px;'></u> switches the filter back off</li>
			<li><b>Click to header</b> cell sorts rows by this column ascending, next click sorts descending. 
				Sort direction and order is indicated by sorting icon:<u style='background:url(Modern/Sort.gif) 0px -2px;'></u>no sort, 
				<u style='background:url(Modern/Sort.gif) 0px -252px;'></u>first column asccending, 
				<u style='background:url(Modern/Sort.gif) 0px -1002px;'></u>first column descending, 
				<u style='background:url(Modern/Sort.gif) 0px -502px;'></u><u style='background:url(Modern/Sort.gif) 0px -1252px;'></u>second column,
				<u style='background:url(Modern/Sort.gif) 0px -752px;'></u><u style='background:url(Modern/Sort.gif) 0px -1502px;'></u>third column.
         </li>
			<li><b>Dragging column's edge in header</b> resizes column</li>
			<li><b>Dragging column's header</b> moves column to new position. 
				New potential position is marked by blue arrows inside the same section and red arrows outside.</li>
			<li><b>Dragging cell</b> moves row to new position indicated by icon in the tree:
            <u style='background:url(Modern/TreeN.gif) -13px 0px;'></u>cannot drop to this position,
				<u style='background:url(Modern/TreeN.gif) -58px 0px;'></u>drop above this row,
				<u style='background:url(Modern/TreeN.gif) -158px 0px;'></u>drop below this row, 
				<u style='background:url(Modern/TreeN.gif) -111px 0px;'></u>drop into row's children, to the end.<br>
				If you drag <b>selected</b> row, all selected rows are dragged together to new place, but only if they are all of the same type.<br> 
				You can drag rows even among more grids, if these are present. In master-detail you can drag rows from detail to master to move rows from one detail row to another.<br>
				<b>When dragging</b>, there are other functions available:<br>
				<ul>
				<li>&nbsp;When mouse moves above<u style='background:url(Modern/TreeN.gif) -210px -2002px;'></u>icon, the row expands its children.</li> 
				<li>&nbsp;When mouse moves above header or head rows, the grid scrolls up, above toolbar or foot rows, the grid scrolls down. To scroll you can use mouse wheel too.</li>
				<li>&nbsp;When mouse moves above pager, the grid switches to page under mouse cursor.</li>
				</ul></li>
			<li><b>Click to</b><u style='padding-left:16px; background:url(Modern/Button.gif) 0px -250px;'></u>shows calendar to change date value</li>
         <li><b>Click to</b><u style='padding-left:16px; background:url(Modern/Button.gif) -1px 0px;'></u>shows list of predefined values for the cell</li>
			<li><b>Click to</b><u style='background:url(Modern/TreeN.gif) -210px -2002px;'></u>expands row's children</li>
			<li><b>Click to</b><u style='background:url(Modern/TreeN.gif) -210px -52px;'></u>collapses rows' children</li>
         <li><b>Dragging cell with Ctrl</b> selects or unselects range of rows or cells</li>
			<li><b>Ctrl + Click</b> selects or unselects clicked row</li>
			<li><b>Shift + Click</b> selects range of rows between focused and clicked, include these two. If any row in the range is selected, unselects the range</li>
         <li><b>Dragging cell with Shift</b> fills values of all selected cells by the first cell in the range</li>
         <li><b>Right click to cell</b> shows popup menu for the cell, if defined</li>
		</ul>
		<p><font color="#008000"><i><b><a name="Keys">Control keys</a></b></i></font></p>
		<ul>
			<li><b>Arrow keys</b> change focused cell</li>
			<li><b>Tab</b> moves focus to the next cell</li>
			<li><b>Shift + Tab</b> moves focus to the prior cell</li>
			<li><b>Tab</b> in edit mode edits next editable cell</li>
			<li><b>Shift + Tab</b> in edit mode edits prior editable cell</li>
         <li><b>Any character key</b> starts edit focused cell</li>
			<li><b>Enter</b> or <b>F2</b> starts edit focused cell</li>
			<li><b>Enter</b> in edit mode confirms edit changes</li>
			<li><b>Alt + Enter</b> in edit mode in multi line textarea confirms edit changes</li>
			<li><b>Ctrl + Enter</b> in edit mode in multi line textarea confirms edit changes</li>
			<li><b>Esc</b> in edit mode cancels edit changes</li>
			<li><b>Gray</b> <b>plus</b> in edit mode confirms edit changes</li>
			<li><b>Gray</b> <b>minus</b> in edit mode cancels edit changes</li>
			<li><b>Space</b> selects or unselects row</li>
			<li><b>Ctrl + Space</b> selects or unselects all rows</li>
			<li><b>Del</b> deletes or un-deletes row</li>
			<li><b>Ctrl + Del </b>deletes or un-deletes selected rows</li>
			<li><b>Ins</b> inserts new row to cursor position</li>
			<li><b>Ctrl + Ins</b> inserts new row into children of focused row</li>
			<li><b>Ctrl + Enter </b>expands / collapses row's children</li>
			<li><b>Home</b> focuses first variable row</li>
			<li><b>End</b> focuses last variable row</li>
			<li><b>Page Up</b> moves focus up by one page</li>
			<li><b>Page Down</b> moves focus down by one page</li>
			<li><b>Ctrl + Enter</b> not in edit mode expands or collapses row's children</li>
			<li><b>Gray</b> <b>plus</b> not in edit mode expands row's children</li>
			<li><b>Gray</b> <b>minus</b> not in edit mode collapses row's children</li>
         <li><b>Ctrl + Z</b> undoes last change, if undo is permitted</li>
         <li><b>Ctrl + Y</b> does again the last undone change</li>
         <li><b>Ctrl + down arrow</b> shows popup dialog with default list or calendar if the cell has defined some</li>
		</ul>
		<p><font color="#008000"><i><b><a name="CopyPaste">Copy & paste</a></b></i></font></p>
		<ul>
			<li><b>Ctrl + C</b> copies values from all selected rows to clipboard. If no row is selected, copies focused row. 
			Only if grid is not in edit mode. Data are in plain text, cells are separated by tabulator, rows are separated by enter (CRLF).
			This data can be pasted back to the grid or to any text editor or spreadsheet program like MS Excel. 
         Not in Opera browser.</li>
         <li><b>Ctrl + V</b> pastes values from clipboard to selected rows. If no row is selected, copies first row to focused row. 
         Only if grid is not in edit mode.
			Cells in data are tab separated, rows are CRLF or CR or LF separated. Changes only cells that can be edited. 
			If pasted data has less columns than grid, pastes them from actual focused column, otherwise from first column. 
         Not in Opera browser.</li>
      </ul>
		<p><font color="#008000"><i><b><a name="Toolbar">Toolbar</a></b></i></font></p>
		<ul>
			<li><em style='background:url(Modern/Toolbar.gif) -3px 0px;'></em>
			   <b>Submits</b> <b>changed data</b> to server and accepts all pending changes, if server validated them, otherwise marks invalid cells.</li>
         <li><em style='background:url(Modern/Toolbar.gif) -53px 0px;'></em>
			   <b>Reloads</b> <b>data</b> from server and cancels pending changes.</li>
         <li><em style='background:url(Modern/Toolbar.gif) -103px 0px;'></em>
			   <b>Refreshes</b> <b>pages</b> if grid slows down (if too many pages were already rendered)</li>
         <li><em style='background:url(Modern/Toolbar.gif) -753px 0px;'></em>
			   <b>Prints the grid</b>, opens new browser window with printable version of the grid</li>
         <li><em style='background:url(Modern/Toolbar.gif) -803px 0px;'></em>
            <b>Exports all data</b> to spreadsheet program</li>
         <li><em style='background:url(Modern/Toolbar.gif) -153px 0px;'></em>            
			   <b>Adds</b> <b>new row</b> to the cursor position if parent row accepts children.<br> 
			   Or if there are <b>selected</b> rows, the menu is displayed and you can choose to move or copy selected rows or to ignore selection and add new row.</li>
			<li><em style='background:url(Modern/Toolbar.gif) -203px 0px;'></em>
			   <b>Adds</b> <b>new row</b> to focused row's <b>children</b>, to the end, if this row accepts children.<br>
			   Or if there are <b>selected</b> rows, the menu is displayed and you can choose to move or copy selected rows or to ignore selection and add new row.</li>
			<li><em style='background:url(Modern/Toolbar.gif) -253px 0px;'></em>
			   <b>Enables</b> or disables <b>sorting</b>. When enabling sorting, re-sorts grid according to actual sorting.
			   <br>You can disable sorting, if you need to choose new sorting according to more columns to avoid multiple re-sorting, especially in paged grids.</li>
         <li><em style='background:url(Modern/Toolbar.gif) -353px 0px;'></em>
			   <b>Enables</b> or disables <b>calculations</b>. When enabling calculations, re-calculates all cells.
            <br>You can disable calculations when editing large grids.</li>
			<li><em style='background:url(Modern/Toolbar.gif) -453px 0px;'></em>
			   <b>Expands all rows</b>. 
				For large grids expands only some rows to avoid locking browser. Starts expanding from focused row.</li>
			<li><em style='background:url(Modern/Toolbar.gif) -503px 0px;'></em>
			   <b>Collapses all rows</b>.</li>
			<li><em style='background:url(Modern/Toolbar.gif) -653px 0px;'></em>
			   Displays menu to choose what <b>columns</b> will be <b>displayed</b>. </li>
			<li><em style='background:url(Modern/Toolbar.gif) -553px 0px;'></em>
			   <b>Displays</b> TreeGrid <b>configuration</b> window. 
				These settings are saved to client cookies and therefore are persistent. See Configuration description below.</li>
			<li><em style='background:url(Modern/Toolbar.gif) -603px 0px;'></em>
			   <b>Displays</b> this <b>help</b></li>
			<li><em style='background:url(Modern/Toolbar.gif) -703px 0px;'></em>
			   You can <b>resize grid</b> by mouse dragging this icon on the right bottom corner. By double click you can restore to original size.</li>
			</ul>
		<p><font color="#008000"><i><b><a name="Configuration">Configuration</a></b></i></font></p>
		<ul>
			<li><b>Show deleted rows (in red)</b>. 
				If checked, deleted rows are still visible and colored and can be undeleted. If you check Auto updates, this option have no sense.</li>
			<li><b>Auto sort rows after change</b>. 
				If checked, after user modify value in column according to is grid sorted, row is sorted and moved to the new position</li>
         <li><b>Sort click</b>. How sorting can be set by clicking to column caption.</li>
			<li><b>Auto update changes to server</b>.
				If checked, all modifications (value changing, rows moving, adding, deleting) are immediately uploaded to server. 
				Does not wait for server response, grid is still accessible. After server response clears changed flags.
				If it is not checked, updates can be send by submit button<em style='background:url(Modern/Toolbar.gif) -3px 0px;'></em>.</li>
			<li><b>Mouse hover</b>. What blinks under mouse cursor. Hovering all cells can slow down browser responses.</li>
			<li><b>Show dragged object</b>. If checked, dragging rows or moving columns are attached to the mouse cursor.</li>
			<li><b>Show row's left panel</b>. If it is not checked, the left panel<u style='padding-left:64px;background:url(Modern/FastPanel1.gif) 0px 0px;'></u>
                is hidden and its functions can be performed by keys only.</li>
			<li><b>Show pager</b>. If checked, the pager with page names is visible on the right of the grid.</li>
			<li><b>Show all pages</b>. If checked, all pages are visible at once and can be accessed by sliding scrollbar or moving cursor. 
				The page is rendered only when is scrolled to the window. 
				<br>If it is not checked, only one page is visible at a time and other pages can be accessed by clicking on pager or by PgUp and PgUp keys.
         </li>
		</ul>
		<p><font color="#008000"><b><i><a name="Filter">Filter row</a></i></b></font></p>
		<ul>
			<li>Filter row is special row, usually displayed on the top, under header.
				There can be set filter conditions for every column.
				If other rows has in this column value which satisfies the filter condition, the row is displayed, otherwise is hidden.</li>
			<li>Filtered can be only variable rows. Some rows can be marked as always visible. 
				These are often rows with children rows in tree to filter only some levels.</li>
			<li>A cell in filter row contains filter operator and its parameter value. 
				Some operators are used for some column types only. Filtering is fired after operator or value changes.</li>
			<li>You can select filter operator from menu. 
				By default filter is disabled:<u style='padding-left:16px;background:url(Modern/Filter.gif) 0px 0px;'></u>.</li>
		</ul>
		<p><font color="#008000"><b><i><a name="Group">Group row</a></i></b></font></p>
		<ul>
			<li>Group row is special row, usually displayed on the top, under header and fixed rows. 
			   You can group rows to tree according same values in appropriate column(s).</li>
			<li>Grouped can be only variable rows. Some rows can be marked that cannot be grouped. 
				In tree there will be only one level of rows to be grouped.</li>
			<li>You can select predefined grouping from select box.</li>
			<li>Or you can drag column caption to the group row to be grouped by this column. If some column(s) are placed there already, 
			you can put the new column to appropriate place. To remove column from grouping, just drag its caption from group row outside.</li>
		</ul>
		<p><font color="#008000"><b><i><a name="Search">Search row</a></i></b></font></p>
		<ul>
			<li>Search row is special row, usually displayed on the top, under header and fixed rows.</li>
			<li>You can search rows or cells in grid for simple string like Google or by complex formula.</li>
			<li>The found rows can filtered, selected, colored or focused.</li>
			<li>Or you can select predefined search formulas from select box.</li>
         <li>There are many settings to more specify the searching options.</li>
		</ul>

		<p><font color="#008000"><i><b><a name="Other">Other</a></b></i></font></p>
		<ul>
			<li>If you move focus to another cell in edit mode, the changed value is accepted as if you pressed Enter.</li>
			<li>After confirm new value after edit, calculated cells are recalculated. 
				If Auto sort is set and sorting is enabled by this column, row is moved to another position by sort order. 
				If Auto update is set, value is submitted to server.
         </li>
		</ul>
		<p><font color="#008000"><i><b><a name="Colors">Colors</a></b></i></font></p>
		<ul><li><span style="background:rgb(255,205,205); padding-left:50px">&nbsp;</span> - Deleted row</li>
			<li><span style="background:rgb(205,255,205); padding-left:50px">&nbsp;</span> - Added row</li>
			<li><span style="background:rgb(215,235,235); padding-left:50px">&nbsp;</span> - Moved row - row has been moved to another parent</li>
			<li><span style="background:rgb(235,235,255); padding-left:50px">&nbsp;</span> - Changed row - any cell value has been changed</li>
			<li><span style="background:rgb(205,205,255); padding-left:50px">&nbsp;</span> - Changed cell</li>
			<li><span style="background:rgb(255,255,127); padding-left:50px">&nbsp;</span> - Selected row</li>
			<li><span style="background:rgb(230,230,230); padding-left:50px">&nbsp;</span> - Focused row</li>
			<li><span style="background:rgb(90,255,255);  padding-left:50px">&nbsp;</span> - Focused cell</li>
			<li><span style="background:rgb(255,220,255); padding-left:50px">&nbsp;</span> - Focused cell in edit mode</li>
			<li><span style="background:rgb(255,238,255); padding-left:50px">&nbsp;</span> - Focused cell in read only edit mode</li>
			<li><span style="background:rgb(240,240,240); padding-left:50px">&nbsp;</span> - Cell cannot be focused</li>
			<li><span style="background:rgb(244,244,244); padding-left:50px">&nbsp;</span> - Read only cell</li>
			<li><span style="background:rgb(255,240,255); padding-left:50px">&nbsp;</span> - Master row in master / detail relationship</li>
			<li><span style="background:rgb(255,240,225); padding-left:50px">&nbsp;</span> - Master row displayed in detail table</li>
			<li><span style="background:rgb(255,255,240); padding-left:50px">&nbsp;</span> - Child page</li>
			<li><span style="background:rgb(250,250,245); padding-left:50px">&nbsp;</span> - Row under mouse cursor</li>
			<li><span style="background:rgb(220,240,255); padding-left:50px">&nbsp;</span> - Cell under mouse cursor</li>
		</ul>
		<p><font color="#008000"><i><b>More info</b></i></font></p>
		<ul>
			<li><a href="http://www.treegrid.com/" target="_top">http://www.treegrid.com/</a></li>
		</ul>
	</body>
</html>